<template>
    <el-dialog
            :title="title"
            :visible="show"
            width="80%"
            :before-close="closeDialog"
            @open="openAction"
    >
        <el-form
                ref="queryForm"
                :model="queryForm"
                label-width="80px"
                :inline="true"
                label-position="right"
                size="mini">
            <el-form-item label="账户名" prop="username">
                <el-input v-model="queryForm.username" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
                <el-input v-model="queryForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
                <el-input v-model="queryForm.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="queryForm.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否可用" prop="enabled">
                <dict-select
                        :dict-value.sync="queryForm.enabled"
                        code-name="enabled"
                />
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
           <el-button type="primary" @click="queryUser">查询</el-button>
           <el-button @click="closeDialog">关闭</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import DictSelect from "@/components/SysDictSelect";
    import {defaultQueryPage} from "@/lib/QueryPageUtil";

    export default {
        name: "QueryUser",
        components:{
            DictSelect
        },
        props:{
            title:{type:String,default:"用户查询"},
            show:{type:Boolean}
        },
        data(){
          return{
              queryForm:{
                  username:"",
                  name:"",
                  phone:"",
                  email:"",
                  enabled:null
              },
          }
        },
        methods:{
            closeDialog: function () {
                this.$emit("update:show", false)
            },
            openAction(){
                this.$nextTick(()=>{
                    this.$refs.queryForm.resetFields()
                })
            },
            queryUser(){
                let pageInfo = defaultQueryPage(this.queryForm);
                this.$emit("queryUser",pageInfo)
                this.closeDialog()
            }
        }
    }
</script>

<style scoped>

</style>